<template>
  <a-spin :spinning="loading">
    <div class="target-yield-calendar relative">
      <div class="operate-group">
        {{$t('deviceManage.waterLine')}}： 
        <a-select v-model:value="lineNo" :placeholder="$t('common.all')" @change="otherOperate">
          <a-select-option :value="null">{{$t('common.all')}}</a-select-option>
          <a-select-option v-for="(el,i) in waterList" :value="el.lineNo" :key="i">{{ el.lineNo }}</a-select-option>
        </a-select>
      </div>
      <section>
        <div >
          <div class="px-20 pt-20"> 
            <a-calendar v-model:value="time" @panelChange="onPanelChange" @select="getDetails">
              <template #dateCellRender="{ current }">
                <div class="full-height" v-if="dateHasInfo(current.format('YYYY-MM-DD')).length"> 
                  <span :class="['dots',  timeType(current) == 'today'? '' : timeType(current) == 'past' ?'past' : 'future']"></span>
                  {{dateHasInfo(current.format('YYYY-MM-DD')).info.totalProduction}}
                </div>
              </template>
            </a-calendar>
          </div>
        </div>
        <div class="px-20 pt-20">
          <div class="blue-line pb-20">{{$t('common.date')}}{{selectTime}}</div>
          <a-empty :image="simpleImage" v-if="!detailList.length" style="border:none"/>
          <aside> 
            <div v-for="(item, index) in detailList" :key="index">
              <div><b>{{item.lineName}}（{{item.lineNo}}）</b></div>
              <a-row class="pt-12 pb-8">
                <a-col :span="12">{{ $t('other.statisticalRule') }}：</a-col>
                <a-col :span="12" class="text-right">{{item.statisticsType ? item.statisticsType == 1 ? t('other.accordingToTime') : t('other.byStyle') : '' }}</a-col>
              </a-row> 
              <a-row>
                <a-col :span="12">{{$t('other.targetYield')}}：</a-col>
                <a-col :span="12" class="text-right">{{item.production}}</a-col>
              </a-row>
            </div>
          </aside>
        </div>
      </section> 
    </div>
  </a-spin>
</template>
<script>
 
import { ListMixinPm } from '@/mixin/listMixinPm.js' 
import moment from 'moment' 
import axios from '@/utils/request'
import {store} from "@/store"
import {mapState} from "vuex"
import { Empty } from 'ant-design-vue' 
export default {
  name: 'targetYieldManage',
  mixins: [ListMixinPm], 
  computed:{
    ...mapState({
      waterList:state=>state.normalData.waterList
    })
  },
  data () {
    return { 
      url: {
        list: '/api/hanger/plan-production/listMonthProduction',
        details: '/api/hanger/plan-production/listLineProductionByDay'
      },
      time: '',
      operateDate: moment(),
      lineNo: null,
      detailList:[],
      selectTime: '',
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE
    }
  },
  methods: {
    getQueryParams (value, isOperate) {
      return {
        startDay: (value ? value : isOperate ? this.operateDate : moment()).startOf('month').format('YYYY-MM-DD'),
        endDay: (value ? value : isOperate ? this.operateDate : moment()).endOf('month').format('YYYY-MM-DD'),
        lineNo: this.lineNo
      }
    },
    async loadData (value, isOperate) {
      this.loading = true
      let params = this.getQueryParams(value, isOperate)
      try {
        let res = await axios.postAction(this.url.list, params)
        if (res.success) this.dataSource = res.data || []
        this.loading = false
      } catch {
        this.loading = false
        this.dataSource = []
      }
    },
    async getDetails () {    
      this.selectTime = this.time ? this.time.format('YYYY-MM-DD') : moment().format('YYYY-MM-DD')
      let params = { productDate: this.selectTime,lineNo:this.lineNo}
      try {
        let res = await axios.postAction(this.url.details, params)
        if (res.success) this.detailList = res.data || []
        this.loading = false
      } catch {
        this.loading = false
        this.detailList = []
      }
    },
    onPanelChange (value) {
      this.operateDate = value
      this.loadData(value)
    }, 
    timeType (time) {
      let timeStr = time.format('YYYY-MM-DD')
      let data = moment().format('YYYY-MM-DD')
      let type = 'today'
      if (moment(timeStr).isAfter(data)) type = 'future'
      if (moment(timeStr).isBefore(data)) type = 'past'
      return type
    },  
    dateHasInfo (date) { 
      let list = (this.dataSource || []).filter(i => i.productDate == date)
      return {
        info: list.length ?  list[0] : {},
        length: list.length
      }
    }, 
    async otherOperate() {
      this.loadData(false, true)
      await this.getDetails() 
    }    
  },
  async created() {
    await store.dispatch('getWater')
    await this.getDetails()
  }
}
</script>